<template>
  <view class="attendance">
    <g-month-calendar
      show-back
      :dot-list="dotList"
      :watermark="false"
      @selected-change="changeDate"
      @days-change="daysChange"
    />
    <view
      v-for="(i, k) in dataList"
      :key="k"
      class="attendance-item"
      :style="{
        '--statusColor': i.type == 1 ? '#f5f3eb' : '#EBF5EE',
      }"
      @click="handleRecord(i)"
    >
      <view class="attendance-row">
        <view class="attendance-row-left ss-flex-col ss-row-between">
          <view class="ss-flex ss-flex-1">
            <view class="operator">{{ i.createUserNickName }}</view>
            <view class="post-tag">{{ enumUserType(i.createUserType) }}</view>
          </view>
          <view class="ss-flex">
            <view class="task">{{ i.projectName }}</view>
            <view class="card-tag" :class="{ 'end-tag': i.type == 2 }">
              {{ i.type == 1 ? "启动卡" : "结束卡" }}
            </view>
          </view>
        </view>
        <uv-avatar :src="webSrc(i.createUserAvatar)" size="106rpx" />
      </view>
      <uv-text
        :text="i.address"
        :lines="1"
        prefix-icon="map-fill"
        size="28rpx"
        :icon-style="{
          fontSize: '28rpx',
          color: '#4EA770',
          marginRight: '18rpx',
        }"
        line-height="70rpx"
      />
      <uv-text :text="i.createTime" color="#212121" size="28rpx" line-height="70rpx" />
    </view>
    <uv-load-more v-if="dataList.length > 0" :status="status" line />
    <uv-empty v-else margin-top="20vh" :icon="empty" text="没有打卡记录"  />
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { webSrc, timeFormat, enumUserType } from "@/common/mothed.js";
import { getClockInMarkList, getClockInList } from "@/request/home.js";
import empty from "@/static/empty.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["onRefresh", "onReach"]);

const beginTime = ref(); // 本周开始时间
const endTime = ref(); // 本周结束时间
const dotList = ref([]); // 点标记
const queryParams = ref({
  time: timeFormat(Number(new Date())), // 当前日期
  pageNum: 1, // 当前页码
  pageSize: 20, // 每页条数
});
const total = ref(0); // 总条数
const dataList = ref([]); // 数据列表
const status = ref("loadmore"); // 加载状态

onMounted(() => {
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  { immediate: true, deep: true }
);

// 获取打卡记录
const getList = () => {
  status.value = "loading";
  getClockInList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};

// 获取点标记列表
const getMarks = () => {
  getClockInMarkList({
    beginTime: beginTime.value,
    endTime: endTime.value,
  }).then((res) => {
    dotList.value = res.data;
  });
};

// 选择日期
const changeDate = (date) => {
  queryParams.value.time = date;
  queryParams.value.pageNum = 1;
  getList();
};

// 日期范围
const daysChange = (date) => {
  beginTime.value = timeFormat(Number(date.start));
  endTime.value = timeFormat(Number(date.end));
  getMarks();
};

// 查看打卡记录
const handleRecord = (item) => {
  uni.openLocation({
    latitude: item.latitude,
    longitude: item.longitude,
  });
};
</script>
<style lang="scss" scoped>
.attendance {
  width: auto;
  margin: 30rpx 40rpx;
  border-radius: 20rpx;
  .attendance-item {
    --statusColor: #f5f3eb;
    width: auto;
    height: 282rpx;
    background: #fff;
    box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16),
      inset 0 -40rpx 64rpx 2rpx var(--statusColor);
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border: 2rpx solid #fff;
    margin-bottom: 30rpx;
    .attendance-row {
      display: flex;
      justify-content: space-between;
      &-left {
        max-width: 480rpx;
        flex: 1;
        view {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .operator {
          font-size: 36rpx;
          color: #212121;
        }
        .post-tag {
          min-width: 220rpx;
          font-size: 24rpx;
          color: #757575;
          margin-left: 30rpx;
        }
        .task {
          max-width: 350rpx;
          font-size: 24rpx;
          color: #212121;
        }
        .card-tag {
          width: 72rpx;
          font-size: 24rpx;
          color: #f1a82a;
          padding: 2rpx 10rpx;
          background: #fffbf5;
          border-radius: 8rpx;
          margin-left: 22rpx;
        }
        .end-tag {
          color: #4ea770;
          background: #f5fff8;
        }
      }
    }
  }
}
</style>
